<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view class="list-bg">
      <OrderProductItem :order-detail-data="{'showProductPrice': showProductPrice}" :order-items-detail-data="orderItemsDetailData" />
      <view class="u-p-b-40">
        <u-loadmore :status="status" />
      </view>
    </view>
  </basePage>
</template>

<script>
import OrderProductItem from '@/components/order-product-list/order-product-item'
import { postOrderItemsDetail } from '@/api/orderApi';
import basePage from '@/components/base-page';
import { orderGoodsItems } from '@/api/payment';
export default {
  name: 'OrderItemsDetail',
  components: {
    OrderProductItem,
    basePage
  },
  data() {
    return {
      showProductPrice: 1,
      orderItemsDetailData: [],
      status: 'loading',
      page: 1,
      pageSize: 20,
      orderNo: '',
      pageType: '',
      pageParams: {
        state: null,
        emptyTitle: '一个商品都没有哦～',
        errorTitle: '请求失败',
        showButton: false
      }
    }
  },
  onReachBottom() {
    this.page++
    if (this.pageType == 'pay') {
      this.itemsDetail(orderGoodsItems)
    } else {
      this.itemsDetail(postOrderItemsDetail)
    }
  },
  onLoad(option) {
    this.orderNo = option.orderNo
    this.pageType = option.pageType
    this.showProductPrice = option.showProductPrice
    this.status = 'loading'
    this.page = 1
    if (option.pageType == 'pay') {
      this.itemsDetail(orderGoodsItems)
    } else {
      this.itemsDetail(postOrderItemsDetail)
    }
  },
  methods: {
    itemsDetail(url) {
      const params = { 'orderNo': this.orderNo, 'pageNum': this.page, 'pageSize': 20 }
      url(params).then((res) => {
        if (res.data != null) {
          if (res.data.result.length != 0) {
            if (res.data.result.length <= 20) {
              this.status = 'nomore'
            }
            this.orderItemsDetailData.push(...res.data.result)
          } else if (this.page == 1 && res.data.result.length == 0) {
            this.status = ''
            this.pageParams.state = 'EMPTY'
          } else {
            this.status = 'nomore'
          }
        } else {
          this.status = ''
          this.pageParams.state = 'EMPTY'
        }
      }).catch(() => {
        // eslint-disable-next-line no-mixed-spaces-and-tabs
      })
    }
  }
}
</script>

<style>
</style>
